@import "~_a/styles/base.scss";
body{
	 min-width: 1200px;
}

#app {
  min-height: 100%;
}

.page {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  min-height: 100vh;
  min-width: 1200px;
}

.middle {
  width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.radio-mg-r-20 {
  margin-right: 20px !important;
}
// 字体颜色
.c-w {
  color: #ffffff;
}
.c-o {
  color: $mainColor;
}
.c-d {
  color: #1b1b1b;
}
.c-d2 {
  color: #3d3d3d;
}
.c-b {
  color: #1c9cdf;
}
.c-g {
  color: #6C7788;
}
.c-gr {
  color: #59ab15;
}
.c-r {
  color: $mainColor;
}
.c-black{
  color:#000;
}

.f-w-400 {
  font-weight: 400;
}
.f-w-600 {
  font-weight: 600;
}

// 文字大小
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.f-16 {
  font-size: 15px;
}
.f-18 {
  font-size: 18px;
}

/* 定义字体大小 */
// 大于10的都为rpx单位字体
@for $i from 10 through 40 {
		.pub-font-#{$i} {
			font-size: $i + px;
		}
}


/* 定义内外边距，历遍1-80 */
@for $i from 0 through 150 {
		// 如jn-m-30
		.pub-m-#{$i} {
			margin: $i + px !important;
		}
		// 如jn-p-30
		.pub-p-#{$i} {
			padding: $i + px !important;
		}
		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： pub-m-l-30
			// 定义外边距
			.pub-m-#{$short}-#{$i} {
				margin-#{$long}: $i + px !important;
			}
			// 定义内边距
			.pub-p-#{$short}-#{$i} {
				padding-#{$long}: $i + px !important;
			}
		}
}

.flx-row-bw-c {
  @include flx(row, bw, c);
}
.flx-row-bw-s {
  @include flx(row, bw, s);
}
.flx-row-s-s {
  @include flx(row, s, s);
}
.flx-row-bw {
  @include flx(row, bw);
}
.flx-row-s-c {
  @include flx(row, s, c);
}
.flx-row-e-c {
  @include flx(row, e, c);
}
.flx-row-c-c {
  @include flx(row, c, c);
}
.flx-col-s-c {
  @include flx(col, s, c);
}
.flx-col-c-c {
  @include flx(col, c, c);
}
.flx-col-c-s {
  @include flx(col, c, s);
}
.flx-col-s-s {
  @include flx(col, s, s);
}
.flx-col-s-e {
  @include flx(col, s, e);
}
.flx-col-e-c {
  @include flx(col, e, c);
}
.flx-col {
  @include flx(col);
}
.flx-row {
  @include flx(row);
}

.w-p-100 {
  width: 100%;
}
.bread-crumb-padding {
  padding: 16px 0;
}

// 过滤器样式
.filter-area {
  background-color: #fff;
  .top-area {
    height: 49px;
    border-bottom: #f1f1f1 dashed 1px;
  }
  .bottom-area {
    padding: 13px 0 13px 100px;

    .button-style {
      @include size(138px, 42px);
      @include btn-s(null, 42px, 6px);
    }
    .search-button {
      @include h-c(#f9521f, rgba(#f9521f, 0.8), #fff);
      margin-right: 22px;
    }
    .clear-button {
      border: #898989 solid 1px;
      color: #1b1b1b;
      transition: border-color 0.3s, color 0.3s;

      &:hover {
        border: #f9521f solid 1px;
        color: #f9521f;
      }
    }
  }
}

// h3标题样式
.title-h3 {
  margin-left: 36px;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color:#000;

  span {
    color: #f9521f;
  }

  .refresh-button {
    @include h-c(null, null, #1c9cdf, rgba(#1c9cdf, 0.6));
    font-size: 14px;
    font-weight: 400;
    margin-left: 5px;
    cursor: pointer;
  }
}

// pagesizebutton样式
.page-size-button-area {
  padding-right: 30px;

  span {
    color: #1b1b1b;
    font-size: 14px;
  }
  .button-style {
    margin-left: 10px;
    @include size(46px, 30px);
    @include btn-s(null, 30px, 4px);
    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  }
  .not-active {
    border: 1px solid #898989;
    color: #898989;
    background-color: #fff;

    &:hover {
      border: 1px solid #f9734a;
      color: #f9734a;
    }
  }
  .active {
    color: #fff;
    background-color: #f9734a;
  }
}

// 表格样式
.table-area {
  width: 100%;
  table-layout: auto;
  box-sizing: border-box;
  thead {
   // background-color: #eceff3;
    border-bottom: 1px solid #e8eaec;
    color: #000;
    .line-style {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: left;
    }

    th {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 100px;
    }

    .sort-icon-top {
      @include triangle(5px, #898989);
      transform: rotate(180deg);
      margin-bottom: 2px;
    }
    .sort-icon-bottom {
      @include triangle(5px, #898989);
    }
    .sort-active {
      border-color: $mainColor transparent transparent !important;
    }
  }
  tbody {
    tr {
      transition: transform 0.1s, box-shadow 0.3s;
      border-bottom: 1px solid #e8eaec;

      &:hover {
        transform: scale(1.01);
        box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
      }
    }
    .lc-f {
      background-color: #fff;
    }
    .lc-F9FAFB {
      background-color: #f9fafb;
    }
    td {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 170px;
      padding-right: 8px;
    }
  }
  .line-style {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
  }
  .line-style-left {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: center;
    padding-left: 20px;
  }
  .strong-f {
    color: #1c9cdf;
  }
  .normal-f {
    color: #000;
  }
  .f-ell-sin {
    display: inline-block;
    @include f-ell-sin;
  }
  .f-wrap {
    padding: 8px 0;
    white-space: pre-wrap;
    display: inline-block;
  }

  .button {
    @include size(62px, 30px);
    font-size: 14px;
    border: 1px solid $mainColor;
    @include h-c(#fff, $mainColor, $mainColor, #fff);
    @include btn-s(null, 30px, 6px);
  }
  .tips-area {
    width: 100%;
    overflow: hidden;

    .scroll-area {
      display: inline-block;
    }
    .scroll {
      padding-left: 14px;
      white-space: nowrap;
      text-align: left;
      line-height: 16px;
      font-size: 12px;
      color: $mainColor;
      @include bg-setting("tips", 11px 13px, left 0px);
      margin-right: 30px;
    }
    @keyframes scroll {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }
  }
}
.scroll-action {
  animation: 20s scroll linear infinite;
}
.table-border {
  border-right: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
}
.small-table-area {
  width: 100%;
  table-layout: auto;
  box-sizing: border-box;

  .line-style {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: left;
  }
}
// 表格分页样式
.form-page-bottom-area {
  width: 100%;
  min-height: 85px;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;

  .button-style {
    @include size(100px, 32px);
    @include btn-s(null, 32px, 6px);
  }
  .strong-button {
    @include h-c($mainColor, $color-main-8, #fff);
  }
}

// 个人中心按钮样式
.user-normal-button {
  border: 1px solid $mainColor;
  @include h-c(null, $color-main, $mainColor, #fff);
}
.user-strong-button {
  @include h-c($mainColor, $color-main-8, #fff, #fff);
}
.b-user-strong-button {
  @include h-c(#72AA58, rgba(#72AA58, 0.8), #fff, #fff);
}
.forbid-button {
  background-color: #e8e8e8;
  color: #898989;
  cursor: not-allowed !important;
}
.gray-button {
  background-color: #e8e8e8;
  color: #898989;
  cursor: pointer;
}
.b-form-font-button {
  @include h-c(null, null, #1c9cdf, rgba(#1c9cdf, 0.8));
  font-size: 14px;
  cursor: pointer;
}
.o-form-font-button {
  @include h-c(null, null, $mainColor, $color-main-8);
  font-size: 14px;
  cursor: pointer;
}
.normal-button-size {
  min-width: 100px;
  height: 36px;
  font-size: 16px;
  @include btn-s(0 20px, 36px, 4px);
}
.small-button-size {
  min-width: 90px;
  height: 32px;
  font-size: 14px;
  @include btn-s(0 20px, 32px, 4px);
}
.big-button-size {
  min-width: 150px;
  height: 43px;
  font-size: 14px;
  @include btn-s(0 20px, 43px, 4px);
}
.big-button-size-40 {
  min-width: 150px;
  height: 40px;
  font-size: 14px;
  @include btn-s(0 20px, 40px, 4px);
}
.code-button {
  width: 100px;
  height: 40px;
  font-size: 14px;
  @include btn-s(null, 40px, 4px);
  flex-shrink: 0;
  margin-left: 15px;
}
.small-code-button {
  width: 90px;
  height: 32px;
  font-size: 14px;
  @include btn-s(null, 32px, 4px);
  flex-shrink: 0;
  text-align: center;
}
.form-small-button-size {
  min-width: 112px;
  height: 34px;
  font-size: 14px;
  @include btn-s(0 10px, 34px, 4px);
}
.box-shadow {
  box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
}



// 初始化样式
html,
body {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif,
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB" !important;
  background-color: $w;
  font-size: 14px !important;
  // line-height: 14px !important;
  height: 100%;
}

html,
body,
div,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
form,
input,
textarea,
th,
td,
select {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

img {
  border: none;
  vertical-align: middle;
}

a {
  text-decoration: none;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

input,
textarea {
  outline: none;
  border: none;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 400px rgba(255, 255, 255, 1) inset;
  -webkit-text-fill-color: #ababab; //设置字体颜色
}
input {
  filter: none !important;
}

textarea {
  resize: none;
  overflow: auto;
  background-color: transparent !important;
}

// iview输入框样式
.ivu-input-type-text .ivu-input {
  line-height: 32px !important;
  height: 32px !important;
  color: #20213c !important;
}
.ivu-input:hover,
.ivu-input-number:hover {
  border-color: $mainColor !important;
}
.ivu-input:focus,
.ivu-input-number:focus {
  border-color: $mainColor !important;
  box-shadow: none !important;
}
.ivu-input-number-handler-wrap a:hover {
  color: $mainColor !important;
}

// 选择器样式
.ivu-select {
  height: 32px !important;
  color: #20213c !important;
}
.ivu-select-selection-focused,
.ivu-select-selection:hover {
  border-color: $mainColor !important;
}
.ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: $mainColor !important;
}
.ivu-select-selection,.ivu-select-selected-value{
  line-height: 32px !important;
  height: 32px !important;
}
.ivu-select-visible .ivu-select-selection {
  border-color: $mainColor !important;
  box-shadow: none !important;
}
.ivu-select-placeholder{
  height: 32px !important;
  line-height: 32px !important;
}
// 多级选择器
.ivu-cascader-menu .ivu-cascader-menu-item-active{
  color:$mainColor !important;
}

//时间选择器
.ivu-date-picker-focused input{
  border-color:$mainColor !important;
  box-shadow: 0 0 0 2px $color-main !important;
}
.ivu-date-picker-cells-focused em {
  box-shadow: 0 0 0 1px $mainColor inset !important;
}

.ivu-date-picker{
  .ivu-input-suffix i{
    line-height: 32px !important;
  }
}


.ivu-date-picker-cells-cell-selected em, .ivu-date-picker-cells-cell-selected:hover em {
  background: $mainColor !important;
  color: #fff;
}

.ivu-date-picker-cells-cell:hover em {
  background: $color-main !important;
}
.ivu-date-picker-cells-cell-today em::after {
  background: $mainColor !important;
}

 .ivu-input-number {
  height: 32px !important;
  line-height: 32px !important;
  .ivu-input-number-handler {
    height: 19px !important;
    line-height: 19px !important;
    .ivu-input-number-handler-up-inner {
      height: 19px !important;
      line-height: 19px !important;
    }
  }
}

// checkbox样式
.ivu-checkbox + span,
.ivu-checkbox-wrapper + span {
  margin-left: 5px;
}
.ivu-checkbox-checked .ivu-checkbox-inner{
  background-color: $mainColor!important;
  border-color: $mainColor !important;
}
.ivu-checkbox-focus{
  box-shadow: 0 0 2px $color-main!important;
}

// 分页样式
.ivu-page-item-active {
  background-color: $mainColor!important;
  border-color: #e5e5e5 !important;
}
.ivu-page-item-active a,
.ivu-page-item-active:hover a {
  color: $w !important;
}
.ivu-page-next:hover,
.ivu-page-prev:hover,
.ivu-page-options-elevator input:hover,
.ivu-page-item:hover {
  border-color: $mainColor!important;
}
.ivu-page-item-active a {
  color: #ffffff !important;
}
.ivu-page-item.ivu-page-item-active:hover a {
  color: #ffffff !important;
}
.ivu-page-next:hover a,
.ivu-page-prev:hover a,
.ivu-page-item-jump-next a,
.ivu-page-item-jump-prev a,
.ivu-page-item .ivu-page-item:hover a,
.ivu-page-item:hover a {
  color: $mainColor !important;
}
.ivu-page-options-elevator input:focus {
  border-color: $mainColor !important;
  box-shadow: none !important;
}

// modal样式
.ivu-modal-header {
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
}
.ivu-modal-body {
  padding: 0 !important;
}
.modal-text {
  text-align: center;
}

// 上传
.ivu-upload-drag:hover {
  border-color: $mainColor !important;
}

.align-center {
  text-align: center;
}
.cursor-pointer {
  cursor: pointer;
}

// 规则样式
.rule-content-area {
  padding: 25px 30px;
  overflow-y: auto;

  p {
    margin-bottom: 20px;
  }
  .p-red {
    color: #fc461e;
  }
  h2 {
    font-size: 18px;
    margin-bottom: 12px;
    border-bottom: #f1f1f1 dashed 1px;
  }
  i {
    color: #fc461e;
    font-style: normal;
  }
  .tips {
    color: #898989;
    padding-left: 20px;
  }
}

//协议
.condition-list {
  div{
    h3{
      display: none;
    }
    .flx-row-s-s{
      .p-icon {
        width: 8px;
        height: 8px;
        // @include size(8px);
        border-radius: 50%;
        background-color: #b1b1b1;
        margin-right: 8px;
        margin-top: 7px;
        flex-shrink: 0;
      }
      p {
        font-size: 14px;
        @include h-c(null, null, rgba(#3d3d3d, 0.8), $mainColor);
      }
    }
  }
}

.ivu-input-number-input-wrap {
  height: 100%!important;
  .ivu-input-number-input {
    height: 100%!important;
  }
}
.ivu-input-number-focused {
  box-shadow: none!important;
}


// 表格样式
.ivu-table th{
  background-color: transparent!important;
  height: 48px!important;
}
.ivu-table td{
  background-color: transparent!important;
  height: 48px!important;
}

// radio
.ivu-radio-checked{
  .ivu-radio-inner{
    border-color:$mainColor !important;
    &::after{
      background-color:$mainColor !important;
    }
  }
}

.ivu-btn-primary {
  background-color: $fs!important;
  border-color: $fs!important;
}

.ivu-btn-text:hover {
  color: $fs!important;
}

.ivu-btn:focus {
  box-shadow: none;
}


.wrapdmTextarea {
  position: relative;
  height: 32px;
  width: 150px;

  .textarea-warp {
    //position: absolute;
    left: 0;
    right: 0;
    width: 150px;
    background-color: #fff;
  }

  .dmTextarea {
    height: 32px;
    width: 100%;
    line-height: 22px;
    padding: 0;
    font-size: 14px;
    border: 0;
    display: block;
    background-color: transparent;
    cursor: pointer;
    resize: none;
    outline: none;
    border-radius: 4px;
    font-family: inherit;
  }

  .textarea-warp .ivu-input {
    height: 32px !important;
    line-height: 22px !important;
    background-color: #fff !important;
    z-index: 4;
  }

 .textarea-warp .dmTyping .ivu-input {
    height: 180px !important;
  }
}
